<template>
    <div class="main clearfix">
        <div class="right fr">
            <div>
                <div class="title">
                    <h3>绑定新商家</h3>
                </div>
                <el-form>
                    <el-form-item style="position: relative;left: 20px;">
                        <el-button @click="addLink" type="primary" size="mini"
                                   style="background: #8d4bbb;border: #8d4bbb;float: left">
                            生成链接
                        </el-button>
                        <div style="padding-left: 25px;float: left">
                            {{url ? url:'暂无'}}
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <!-- <div>
                 <h3 class="title1">已绑定的店铺</h3>
                 <el-table :data="tableData4" max-height="250" style="width: 100%">
                     <el-table-column label="店铺多多号" prop="id" width="100">
                     </el-table-column>
                     <el-table-column label="店铺类型" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="代码注入状态" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="防降权代码地址" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="防降权代码注入时间" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="防降权代码结束时间" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="续费防降权代码时间" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="续费一年防降权代码时间" prop="" width="100">
                     </el-table-column>
                     <el-table-column label="续费永久防降权代码时间" prop="" width="100">
                     </el-table-column>
                     <el-table-column fixed="right" label="" width="100">
                         <template slot-scope="scope">
                             <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" size="small"
                                        type="text">
                                 移除
                             </el-button>
                         </template>
                     </el-table-column>
                 </el-table>
             </div>-->
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                url: '',
                form: {
                    domains: [{
                        value: ''
                    }],
                    index: '',
                    name: '',
                    wangwang: '',
                    desc: '',
                },
                radio: '1',
                formInline: {
                    user: '',
                    region: ''
                }
            };
        },
        methods: {
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            onSubmit() {
                console.log('submit!');
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                /*s[8] = s[13] = s[18] = s[23] = "-";*/
                return s.join("");
            },
            addLink() {
                if (this.url === '') {
                    this.url = "http://url.com/" + this.uuid();
                } else {
                    this.$message({
                        type: "error",
                        message: "邀请链接已存在"
                    });
                }

            }
        },
    }
</script>
<style>
    .main {
        width: 52%;
        margin: 0 auto;
    }

    .right {
        width: 95%;
        border: 1px solid #f0f0f4;
        margin: 10px;
    }

    .title {
        background: #f0f0f4;
        margin-bottom: 25px;
    }

    .title h3 {
        display: inline-block;
        padding-left: 20px;
    }

    .title1 {
        background: #f0f0f4;
        padding: 20px;
    }
</style>
